@import "../../variable.less";
.@{prefix} {
  &-pick {
    display: inline-block;
    color: var(--text-color);
    position: relative;
    cursor: text;
    &.@{prefix}-pick-single {
      .@{prefix}-pick-picker {
        display: flex;
      }
      .@{prefix}-pick-placeholder {
        line-height: 30px;
        padding: 0;
      }
      .@{prefix}-pick-search {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 11px;
        right: 25px;
        &-input {
          height: 30px;
          width: 100%;
          margin: 0;
          padding: 0;
          background: transparent;
          border: none;
          outline: none;
          appearance: none;
        }
      }
    }
    &.@{prefix}-pick-multiple {
      .@{prefix}-pick-picker {
        display: flex;
        padding: 1px 4px;
        padding-right: 25px;
        .@{prefix}-pick-overflow {
          position: relative;
          display: flex;
          flex: auto;
          flex-wrap: wrap;
          max-width: 100%;
        }
      }
      .@{prefix}-pick-placeholder {
        position: absolute;
        top: 50%;
        right: 11px;
        left: 11px;
        transform: translateY(-50%);
      }
      .@{prefix}-pick-search {
        position: relative;
        max-width: 100%;
        margin-inline-start: 7px;
        &-input {
          min-width: 5.1px;
          width: 100%;
          height: 24px;
        }
      }
    }
    &.@{prefix}-pick-focused {
      .@{prefix}-pick-picker {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
        outline: 0;
      }
    }
    &.@{prefix}-pick-open {
      .@{prefix}-pick-item {
        color: #bfbfbf;
      }
    }
    &-item {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: 30px;
      padding: 0;
      transition: all 0.3s;
    }
    &-dropdown {
      box-shadow: 0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;
    }
    &.@{prefix}-pick-multiple {
      .@{prefix}-pick-picker {
        min-height: 32px;
        height: auto;
      }
      .@{prefix}-pick-item {
        position: relative;
        display: flex;
        flex: none;
        box-sizing: border-box;
        max-width: 100%;
        height: 24px;
        margin-top: 2px;
        margin-bottom: 2px;
        line-height: 22px;
        background: #f5f5f5;
        border: 1px solid #f0f0f0;
        border-radius: 2px;
        cursor: default;
        transition: font-size .3s, line-height .3s, height .3s;
        user-select: none;
        margin-inline-end: 4px;
        padding-inline-start: 8px;
        padding-inline-end: 4px;
        &-text {
          color: var(--text-color);
          display: inline-block;
          margin-right: 4px;
          overflow: hidden;
          white-space: pre;
          text-overflow: ellipsis;
        }
        .@{prefix}-pick-close-btn {
          font-size: var(--font-size-small);
          .@{prefix}-icon {
            font-size: var(--font-size-small);
            color: #00000073;
            transition: all 0.3s;
            &:hover {
              color: #333;
              cursor: pointer;
            }
          }
        }
      }
    }
    &-picker {
      position: relative;
      width: 100%;
      height: 32px;
      padding: 0 11px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-base);
      transition: all 0.3s;
      &:hover {
        border-color: var(--primary-color);
      }
    }
    &-search-input {
      height: 30px;
      width: 100%;
      margin: 0;
      padding: 0;
      background: transparent;
      border: none;
      outline: none;
      appearance: none;
    }
    &-placeholder {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #bfbfbf;
      pointer-events: none;
    }
    &-icon {
      position: absolute;
      top: 50%;
      margin-top: -6px;
      width: 12px;
      height: 12px;
      line-height: 1;
      display: inline-block;
      right: 11px;
      
    }
    &-suffix {
      font-size: var(--font-size-small);
      vertical-align: top;
      color: #00000040;
      cursor: pointer;
    }
    &-dropdown-content {
      padding: 8px 4px;
      max-height: 240px;
      overflow: auto;
      background-color: #fff;
      &.@{prefix}-pick-show-list {
        height: 240px;
        overflow: auto;
      }
      .ant-tree-treenode {
        width: 100%;
        .ant-tree-node-content-wrapper {
          flex: auto;
        }
      }
    }
    &-overflow-item {
      flex: none;
      align-self: center;
      max-width: 100%;
    }
  }
}